
<template>
<!-- 这是轮播图 -->
  <div class="swiper-container">
    <div
      :style="{ backgroundImage: 'url(' + bg + ')' }"
      class="swiper-image"
    ></div>
    <!-- 这是轮播图的按钮，鼠标放上去可以显示对应图片以及取消滚动 -->
    <div class="swiper-paginator">
      <div
        v-for="(slide, index) in slides"
        :key="index"
        class="paginator-item"
        :class="{ 'paginator-current': index === value }"
        @mouseover="toggleIndex(index)"
        @mouseout="initTimer"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Swiper",
  /* 目的是将返回的数据转换为string类型 */
  props: {
    slides: {
      type: Array,
      validator(value) {
        return value.every(
          (item) => Object.prototype.toString.call(item) === "[object String]"
        );
      },
    },
    /* 预设value为数值0 */
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      timer: null,
      direction:'vertical'
    };
  },
  computed: {
    bg() {
      return this.slides[this.value];
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.initTimer();
    });
  },
  methods: {
    initTimer() {
      this.timer = setInterval(() => {
        this.$emit("input", (this.value + 1) % this.slides.length);
      }, 4000);
    },
    toggleIndex(index) {
      this.$emit("input", index);
      clearInterval(this.timer);
    },
  },
};
</script>

<style scoped>
.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.swiper-image {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.swiper-paginator {
  margin-top: -30px;
  padding-right: 5px;
  text-align: right;
  list-style: none;
}
.paginator-item {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.3;
}
.paginator-current {
  background-color: #fff;
  opacity: 0.6;
}
</style>